<template>
  <van-cell-group>
    <van-nav-bar class="head" title="用户注册" left-text left-arrow @click-left="onClickLeft" />
    <van-form @submit="onSubmit">
      <van-field
        v-model="account"
        type="text"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="qPassword"
        type="password"
        name="确认密码"
        label="确认密码"
        placeholder="确认密码"
        :rules="[{ required: true, message: '请确认密码' },{
          message:'密码不一致'
        }]"
      />
      <van-field
        v-model="username"
        type="text"
        name="真实姓名"
        label="真实姓名"
        placeholder="真实姓名"
        :rules="[{ required: true, message: '请填写真实姓名' }]"
      />
      <van-field
        v-model="phone"
        type="text"
        name="手机号"
        label="手机号"
        placeholder="手机号"
        :rules="[{ required: true, message: '请填写手机号' }]"
      />
      <van-field
        v-model="nickname"
        type="text"
        name="昵称"
        label="昵称"
        placeholder="昵称"
        :rules="[{ required: true, message: '请填写昵称' }]"
      />

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </van-cell-group>
</template>

<script>
import { post } from "../api/http";
import { Toast } from "vant";
export default {
  data() {
    return {
      account: "",
      username: "",
      password: "",
      nickname: "",
      phone: "",
      qPassword: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/login");
    },
    async onSubmit(values) {
      console.log("submit", values);
      if (this.password !== this.qPassword) {
        return Toast("密码不一致");
      }
      const param = {
        "users.account": this.account,
        "users.username": this.username,
        "users.password": this.password,
        "users.nickname": this.nickname,
        "users.phone": this.phone,
      };
      let { data: res } = await post("/clien/sign", param);
      console.log(res);
    },
  },
};
</script>
<style>
.head {
  width: 100%;
  height: 3rem;
  background-color: #069ffd;
  position: fixed;
}
.van-nav-bar__title {
  color: #ffff;
  padding-top: 9px;
  font-size: 1.5rem;
  text-align: center;
}
.van-nav-bar .van-icon {
  color: #ffffff;
  font-size: 2rem;
  font-weight: bold;
}
.van-nav-bar {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  height: 46px;
  line-height: 1.5;
  text-align: center;
  background-color: #069ffd;
  -webkit-user-select: none;
  user-select: none;
}
</style>
